<template>
	<view class="">
		<view class="uni-input-wrapper">
			<image class="uni_search" src="/static/home/search-history-icon.png" mode="widthFix"></image>
			<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
			<!-- <text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text> -->
			<image class="uni_image" v-if="showClearIcon" @click="clearIcon" src="../../static/home/icon_delete.png"
				mode="widthFix"></image>
			<view class="btn" @click="onSearch">搜索</view>
		</view>
		<!-- list -->
		<list :list="list"></list>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	import list from './list'
	export default {
		components:{list},
		data() {
			return {
				showClearIcon: false,
				inputClearValue: '',
				list:[],
				page:1,
				size:20,
				current:0,
				type:''
			}
		},
		onReachBottom() {
			if (this.current > this.list.length) {
				this.page++
				this.fetchData()
			}
		},
		onLoad(option){
			this.inputClearValue=option.name
			this.type=option.type
			if(option.name){
				this.showClearIcon = true;
			}else{
				this.showClearIcon = false;
			}
			
			// 请求接口
			this.page=1
			this.list=[]
			this.current=0
			this.fetchData()
		},
		methods: {
			clearInput(event) {
				this.inputClearValue = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon: function() {
				this.inputClearValue = '';
				this.showClearIcon = false;
				this.page=1
				this.list=[]
				this.current=0
				this.fetchData()
			},
			async fetchData() {
				try {
					let params={}
					params['page'] = this.page;
					params['size'] = this.size;
					if(this.inputClearValue){
						params['title'] = this.inputClearValue;
					}
					if(this.type){
						params['type']=this.type
					}
					const response = await request('/v1/rent', 'GET',params,
						'list'); // 只需要传递相对路径
					this.list = this.list.concat(response.body.list.map(item => ({
					    ...item,
					    images: JSON.parse(item.images),
					    tags: JSON.parse(item.tags)
					})));
					this.current = response.body.pages.count
				} catch (error) {
					console.error('请求失败:', error);
				}
			},
			//搜索
			onSearch(){
				this.page=1
				this.list=[]
				this.current=0
				this.fetchData()
			},
		}
	}
</script>

<style>
	.uni-input-wrapper{
		width: 95%;
		margin: 0 auto;
		position: relative;
		background: #f4f4f4;
		border-radius: 32rpx;
		margin-top: 12rpx;
	}
	.uni_search{
		width: 32rpx;
		position: absolute;
		left: 28rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	.uni-input{
		width: 70%;
		background: transparent;
		/* border-radius: 32rpx; */
		padding-left: 80rpx;
	}
	.uni_image {
		position: absolute;
		right: 130rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 32rpx;
	}
	.btn{
		width: 112rpx;
		height: 52rpx;
		background: linear-gradient( 270deg, #FD6D17 0%, #FF5E40 100%);
		border-radius: 30rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 52rpx;
		text-align: center;
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
	}
</style>